<template>
  <div id="z-tree" class="flex-col">
    <div class="wrap flex-1">
      <div class="c" style="height: 600px; overflow: auto;">
        <vue-magic-tree
          :setting="setting"
          :nodes="nodes"
          @onClick="onClick"
          @onCheck="onCheck"
          @onCreated="handleCreated"
        />
      </div>
    </div>

    <div class="toolbar">
      <button class="btn" type="button" @click="update">更新数据</button>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import VueMagicTree from 'vue-magic-tree'
export default {
  name: "app",
  components: {
    VueMagicTree, // 引入组件包
  },
  data() {
    return {
      nodes: [],
      ztreeObj: null,
      setting: {
        edit: {
          enable: true,
          drag: {
            isMove: true
          },
          showRemoveBtn: false,
          showRenameBtn: false
        },
        check: {
          enable: true,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid"
          },
          // 设置图标库(采用iconfont class形式)
          iconMap: {
            0: 'iconfilter-fill',
            1: 'iconhome',
            2: 'iconstar'
          },
          // 设置对应每个节点的节点类型，与数据中customType对应(25行)
          key: {
            nodeType: 'customType',
            name: 'nodeName',
            // title: 'nodeName',
            children: 'childList',
            isParent: 'hasChild'
          }
        },
        view: {
          // 开启图标显示功能
          showIcon: true,
          addHoverDom: this.addHoverDom,
          removeHoverDom: this.removeHoverDom,
        },
      }
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      let url= `http://172.31.119.38:35002/roc/customerweb/web/basedata/getHousesTree?projectId=358198412409044992`
      axios.get(url, {
        headers: {
          'X-Access-Source': 'roc',
          'X-Access-Token': '3e391f7301053d11966be88c1b488535'
        }
      }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data;
          this.nodes = data.childList;
          data.childList && data.childList.forEach(item => {
            if (!item.hasChild) { // 如果这个节点没有子级
              delete item['childList'];
            }
          })
        }
      })
    },
    addNode(treeNode) {
      function sum(m,n){
        const num = Math.floor(Math.random()*(m - n) + n);
        return num
      }
      const index = sum(0, 3)
      const newNode = { name: `newNode_${parseInt(Math.random()* 1e5)}`, customType: index }
      this.ztreeObj.addNodes(treeNode, newNode)
    },
    clickRemove(treeNode) {
      console.log('remove', treeNode)
      this.ztreeObj && this.ztreeObj.removeNode(treeNode)
    },
    onClick: function(evt, treeId, treeNode) {
      // 点击事件
      console.log(evt.type, treeNode);
    },
    onCheck: function(evt, treeId, treeNode) {
      // 选中事件
      console.log(evt.type, treeNode);
    },
    handleCreated: function(ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },
    update: function() {
      // 更新示例数据
      this.showIndex = this.showIndex === 0 ? 1 : 0;
    }
  }
};
</script>

<style>
#z-tree {
  height: 100%;
}
.toolbar {
  margin: 20px auto;
}
.toolbar .btn {
  padding: 0.5em 1em;
  outline: none;
  border-radius: 4px;
}
</style>